<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 表格数据
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchQuery = ref('')
const filterStatus = ref('')
const multipleSelection = ref([])

// 模拟获取数据
const fetchData = async () => {
// 实际项目中替换为API调用
const mockData = [
{
id: 1,
title: '阳光花园 2室1厅',
roomNumber: 'A-101',
layout: '2室1厅1卫',
price: 3500,
status: 'available'
},
// 更多模拟数据...
]

tableData.value = mockData
total.value = mockData.length
}

// 分页处理
const handleSizeChange = (val) => {
pageSize.value = val
fetchData()
}

const handleCurrentChange = (val) => {
currentPage.value = val
fetchData()
}

// 操作处理
const handleAdd = () => {
// 打开新增对话框
}

const handleEdit = (row) => {
// 打开编辑对话框
}

const handleDelete = (row) => {
ElMessageBox.confirm('确认删除该房源?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ElMessage.success('删除成功')
fetchData()
})
}

const handleSelectionChange = (val) => {
multipleSelection.value = val
}

const exportData = () => {
// 导出逻辑
}

// 初始化加载
onMounted(() => {
fetchData()
})
</script>

<template>
  <div class="house-management">
    <!-- 顶部筛选区 -->
    <div class="filter-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="searchQuery" placeholder="搜索房源标题/房号"></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="filterStatus" placeholder="房源状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="可租" value="available"></el-option>
            <el-option label="已租" value="rented"></el-option>
          </el-select>
        </el-col>
        <!-- 其他筛选条件... -->
      </el-row>
    </div>

    <!-- 操作按钮区 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleAdd">新增房源</el-button>
      <el-button @click="exportData">导出数据</el-button>
    </div>

    <!-- 数据表格区 -->
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="roomNumber" label="房号"></el-table-column>
      <el-table-column prop="layout" label="户型"></el-table-column>
      <el-table-column prop="price" label="租金(元)"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{row}">
          <el-tag :type="row.status === 'available' ? 'success' : 'info'">
            {{ row.status === 'available' ? '可租' : '已租' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{row}">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.house-management {
padding: 20px;
}
.filter-container {
margin-bottom: 20px;
}
.action-buttons {
margin-bottom: 20px;
}
.pagination-container {
margin-top: 20px;
text-align: center;
}
</style>